<template>
	<view class="main">
		<view class="head">
			<u-icon name="arrow-left" color="#fff" size="40"></u-icon>
			<view class="headInput">
				<u-search bg-color="#fff" placeholder="鞋架" v-model="keyword" :show-action="false"></u-search>
				<view class="headInput-icon">
					<u-icon name="mic" color="rgb(144, 147, 153)" size="34"></u-icon>
				</view>
			</view>
		</view>
		<!-- 未搜索状态 -->
		<view class="tab" v-if="false">
			<view class="tabItem" v-for="(item,i) in 10">
				奥兰牛魔王
			</view>
		</view>
		<view class="select">
			<view class="selectItem selectItem-activ">
				综合
			</view>
			<view class="selectItem">
				销量
			</view>
			<view class="selectItem">
				价格<view class="selectItem-arrow">
					<view class="selectItem-arrowIcon">
						<u-icon name="arrow-up-fill" size="12" color="gray"></u-icon>
					</view>
					<view class="selectItem-arrowIcon">
						<u-icon name="arrow-down-fill" size="12" color="gray"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="contentShop">
				<view class="contentShop-item" v-for="(item,i) in 20">
					<image class="contentShop-itemT" src="../../static/images/coupon_wrap_bg.png" mode=""></image>
					<view class="contentShop-itemB">
						<view class="contentShop-itemB-title">
							百威进尊亲大顺的亲5.0位打算 1个
						</view>
						<view class="contentShop-itemB-money">
							<view class="contentShop-itemB-moneyL">
								￥<text>4</text>.98
							</view>
							<view class="contentShop-itemB-moneyR">
								选规格
							</view>
						</view>
						<view class="contentShop-itemB-new">
							<view class="contentShop-itemB-newL">
								新人
							</view>
							<view class="contentShop-itemB-newC"></view>
							<view class="contentShop-itemB-newR">
								￥<text>34</text>.98
							</view>
						</view>
						<view class="contentShop-itemB-vip">
							<view class="contentShop-itemB-vipL">
								<u-icon name="integral-fill" size="24"></u-icon>
							</view>
							<view class="contentShop-itemB-vipC"></view>
							<view class="contentShop-itemB-vipR">
								￥<text>34</text>.98
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 未搜索状态 -->
			<view class="contentPopular" v-if="false">
				<view class="contentPopular-title">
					热门搜索
				</view>
				<view class="contentPopular-list">
					<view class="contentPopular-item" :class="i<3?'contentPopular-itemColor':''" v-for="(item,i) in 10">
						先领后
					</view>
				</view>
			</view>
			<!-- 未搜索状态 -->
			<view class="contentNew" v-if="false">
				<view class="contentNew-title">
					<view class="contentNew-titleL">
						新人专区
					</view>
					<view class="contentNew-titleR">
						<text>更多</text>
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
				<view class="contentNew-shop">
					<view class="contentNew-shopItem" v-for="(item,i) in 10">
						<image src="../../bundle/static/images/temp-bg.png" mode=""></image>
						<view class="contentNew-shopItem-money">
							￥36
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
			}
		}
	}
</script>

<style>
	.head {
		background: #FF212A;
		display: flex;
		padding: 30rpx;
	}

	.headInput {
		margin-left: 30rpx;
		position: relative;
	}

	.tab {
		background: #fff;
		overflow: scroll;
		display: flex;
		white-space: nowrap;
		padding: 30rpx 0;
	}

	.tabItem {
		padding: 0 30rpx;
		border-right: 2rpx solid #ededed;
	}

	.content {
		padding: 30rpx;
	}

	.contentPopular {
		background: #fff;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.contentPopular-title {
		font-size: 32rpx;
		color: gray;
		margin-bottom: 20rpx;
	}

	.contentPopular-list {
		display: flex;
		flex-wrap: wrap;
	}

	.contentPopular-item {
		border-radius: 10rpx;
		margin-right: 20rpx;
		padding: 8rpx 18rpx;
		margin-bottom: 10rpx;
		background: #F8F8F8;
	}

	.contentPopular-itemColor {
		background: #FFE8E9;
		color: red;
	}

	.contentNew {
		background: #fff;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.contentNew-title {
		display: flex;
		justify-content: space-between;
	}

	.contentNew-titleL {
		color: gray;
		font-weight: 600;
	}

	.contentNew-titleR {
		color: gray;
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.contentNew-titleR text {
		margin-right: 6rpx;
	}

	.contentNew-shop {
		display: flex;
		overflow: scroll;
	}

	.contentNew-shopItem {
		margin-top: 30rpx;
		position: relative;
		margin-right: 30rpx;
		display: flex;
		justify-content: center;
	}

	.contentNew-shopItem image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.contentNew-shopItem-money {
		background: #FF212A;
		color: #F8F8F8;
		position: absolute;
		border-radius: 30rpx;
		font-size: 22rpx;
		padding: 0 6rpx;
		bottom: 0;
	}

	.select {
		display: flex;
		background: #fff;
		justify-content: space-around;
		padding: 30rpx 0;
		font-size: 32rpx;
	}

	.selectItem {
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.selectItem-arrow {
		margin-left: 10rpx;
	}

	.selectItem-arrowIcon {
		height: 12rpx;
		position: relative;
		top: -14rpx;
	}

	.selectItem-activ {
		color: #FF212A;
	}

	.contentShop {
		display: flex;
		flex-wrap: wrap;
	}

	.contentShop-item {
		width: calc(50% - 15rpx);
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.contentShop-item:nth-child(odd) {
		margin-right: 28rpx;
	}

	.contentShop-itemT {
		width: 100%;
		height: 400rpx;
	}

	.contentShop-itemB {
		padding: 10rpx;
		padding-top: 0rpx;
	}

	.contentShop-itemB-money {
		display: flex;
		margin: 20rpx 0;
		justify-content: space-between;
	}

	.contentShop-itemB-moneyL {
		color: red;
		font-size: 22rpx;
		font-weight: 600;
	}

	.contentShop-itemB-moneyL text {
		font-size: 32rpx;
	}

	.contentShop-itemB-moneyR {
		background: #FF212A;
		color: #fff;
		font-size: 22rpx;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
	}

	.contentShop-itemB-new {
		display: flex;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.contentShop-itemB-vip {
		display: flex;
		border-radius: 8rpx;
		overflow: hidden;
		margin-top: 10rpx;
	}

	.contentShop-itemB-newL {
		font-size: 22rpx;
		background: #FF3D00;
		color: #fff;
		padding: 0 6rpx;
	}

	.contentShop-itemB-vipL {
		background: black;
		padding: 0 6rpx;
		color: #FFE9CA;
	}

	.contentShop-itemB-newR {
		font-size: 20rpx;
		color: red;
		font-weight: 600;
		background: #FFEFE7;
		padding: 0 6rpx;
		border-radius: 0 8rpx 8rpx 0;
	}

	.contentShop-itemB-vipR {
		font-size: 20rpx;
		font-weight: 600;
		background: #FFE9CA;
		padding: 0 6rpx;
		border-radius: 0 8rpx 8rpx 0;
	}

	.contentShop-itemB-newR text {
		font-size: 24rpx;
	}

	.contentShop-itemB-vipR text {
		font-size: 24rpx;
	}

	.contentShop-itemB-newC {
		width: 20rpx;
		background: linear-gradient(45deg, #FF3D00, #FF3D00 50%, #FFEFE7 50%, #FFEFE7 100%);
	}

	.contentShop-itemB-vipC {
		width: 20rpx;
		background: linear-gradient(45deg, black, black 50%, #FFE9CA 50%, #FFE9CA 100%);
	}
	.headInput-icon{
		position: absolute;
		right: 30rpx;
		top: 0;
		bottom: 0;
		margin: auto;
		height: 34rpx;
	}
</style>
